<template>
    <div class="orderInfo">
        <div>
            <!-- 订单信息 -->
            <el-row>
                <div class="detail_header">
                    <el-col :span="6">
                        <span class="title">{{ $t('caseorder.yulan.yulan102') }}</span>
                    </el-col>
                    <el-col :span="4">
                        <span class="title">{{ $t('caseorder.yulan.yulan128') }}</span>
                    </el-col>
                    <el-col :span="13">
                        &nbsp;
                    </el-col>
                    <el-col :span="1" v-if="!isExamine && showExport">
                        <div class="header_right">
                            <el-tooltip placement="bottom" :content="$t('caseorder.export')">
                                <img src="@/assets/img/order_pdf.png" @click="toExport" />
                            </el-tooltip>

                        </div>

                    </el-col>

                </div>
            </el-row>

            <el-row class="order_info">
                <el-col :span="6">
                    <div class="order_item">
                        <div>
                            <span class="order_item_title">{{ $t('caseorder.yulan.yulan104') }}：</span>
                            <span class="order_item_info">{{ (dataObj.order && dataObj.order.creatorName) || '--' }}</span>
                        </div>
                        <div>
                            <span class="order_item_title">{{ $t('caseorder.yulan.yulan105') }}：</span>
                            <span class="order_item_info">{{ (dataObj.order && dataObj.order.orderCreateTime) || '--'
                            }}</span>
                        </div>
                        <div>
                            <span class="order_item_title">{{ $t('caseorder.yulan.yulan106') }}：</span>
                            <span class="order_item_info">{{ (dataObj.order && dataObj.order.updateDate) || '--' }}</span>
                        </div>
                        <div>
                            <span class="order_item_title">{{ $t('caseorder.yulan.yulan107') }}：</span>
                            <span class="order_item_info">{{ (dataObj.order && dataObj.order.updaterName) || '--' }}</span>
                        </div>

                        <div v-show="!isExamine">

                            <span class="order_item_title">{{ $t('add.add168') }}：</span>
                            {{ dataObj.order && dataObj.order.designConfirmState == 1 ? $t('add.add006') : $t('add.add005')
                            }}
                        </div>

                        <div v-show="!isExamine">
                            <span class="order_item_title">{{ $t('caseorder.yulan.yulan111') }}：</span>
                            <span class="order_item_info">{{ (dataObj.order && dataObj.order.orderStatusName) || '--'
                            }}</span>
                        </div>
                        <div>
                            <span class="order_item_title">{{ $t('caseorder.yulan.yulan112') }}：</span>
                            <span class="order_item_info">{{ (dataObj.order && dataObj.order.designDemand) || '--' }}</span>
                        </div>

                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="order_img">
                        <el-image v-if="dataObj.order && dataObj.order.imgs" :src="imgUrl" fit="cover" width="246" />
                        <div v-if="!dataObj.order || !dataObj.order.imgs" style="color: #e59740">
                            {{ $t('caseorder.yulan.yulan103') }}
                        </div>
                    </div>

                </el-col>
                <el-col :span="13">
                    <el-table :data="dataObj.mouthList" style="width: 100%" size="mini">
                        <el-table-column prop="mouthNo" :label="$t('caseorder.yulan.yulan116')" min-width="25%" show-overflow-tooltip />
                        <el-table-column prop="repairType" :label="$t('caseorder.yulan.yulan117')" min-width="25%" show-overflow-tooltip />
                        <el-table-column prop="plantingType" v-if="dataObj.order && dataObj.order.orderDataType == 2"
                            :label="$t('caseorder.yulan.yulan130')" min-width="25%" show-overflow-tooltip /> 
                        <el-table-column prop="materials" :label="$t('caseorder.yulan.yulan118')" min-width="25%" show-overflow-tooltip />
                    </el-table>
                </el-col>
                <el-col :span="1" v-if="!isExamine && showExport">
                    &nbsp;
                </el-col>

            </el-row>
        </div>
    </div>
</template>
  
<script>


export default {
    // 订单详情
    name: 'orderInfo',
    props: {
        dataObj: {
            type: Object
        },
        isExamine: {
            type: String
        },
        imgUrl: {
            type: String
        },
        showExport: {
            type: Boolean
        },
    },
    watch: {
        dataObj: {
            handler(newVal, oldVal) {
                this.dataObj = newVal;
                // 处理种植类型的中英文
                this.handlePlantType();
                this.$forceUpdate();
            },
            deep: true,

        }

    },
    components: {

    },
    data() {
        return {


        };
    },

    mounted() {
        this.handlePlantType();
    },

    methods: {
        handlePlantType() {
            if(this.dataObj && this.dataObj.mouthList && this.dataObj.mouthList.length > 0){
                this.dataObj.mouthList.forEach((item) => {
                if (item.plantingType == 0) {
                    item.plantingType = this.$t('caseorder.yulan.yulan131');
                } else if (item.plantingType == 1) {
                    item.plantingType = this.$t('caseorder.yulan.yulan132');
                } else if (item.plantingType == 2) {
                    item.plantingType = this.$t('caseorder.yulan.yulan133');
                } else if (item.plantingType == 3) {
                    item.plantingType = this.$t('caseorder.yulan.yulan134');
                } else if (item.plantingType == 4) {
                    item.plantingType = this.$t('caseorder.yulan.yulan135');
                }
            });
            }
           
        },
        toExport() {
            this.$emit("toExport");
        },
    },
};
</script>

<style lang="scss" scoped>
.detail_header {

    height: 50px;

    .title {
        font-size: 16px;
        font-weight: 800;
        line-height: 20px;
        color: #003e67;
    }

    .header_right {
        position: relative;

        img {
            cursor: pointer;
            width: 38px;
            height: 38px;
        }

        img:nth-child(1) {
            margin-right: 20px;
        }
    }
}

.order_info {
    display: flex;
    align-items: flex-start;

    .order_img {

        width: 246px;
        height: 386px;
    }

    .order_item {
        margin-left: 80px;
        font-size: 12px;

        div {
            margin-bottom: 32px;
        }

        .order_item_title {
            font-size: 12px;
            font-weight: 400;
            // line-height: 50px;
            color: #666666;
        }

        .order_item_info {
            font-size: 12px;
            font-weight: 500;
            // line-height: 50px;
            color: #003e67;
        }
    }
}
</style>
  